<template>
  <div>
    <van-nav-bar
      title="首页"
      :right-text="userName"
      @click-right="onClickRight"
    />
    <van-notice-bar left-icon="volume-o" :scrollable="false">
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :show-indicators="false"
      >
        <van-swipe-item>如今人们都想去葡萄牙,你知道为什么吗?</van-swipe-item>
        <van-swipe-item>您不曾见过的泰国</van-swipe-item>
        <van-swipe-item>去印度探索圣雄甘地的生平 </van-swipe-item>
      </van-swipe>
    </van-notice-bar>
    <van-search
      v-model="value"
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
    />
    <div class="home-swipe-head">
      <span class="recommend">今日推荐</span>
      <span class="tips">每天都有新发现</span>
      <span class="swipe-num">
        <span class="indexPage">{{ indexPage + 1 }}</span>
        <span class="pageNum">/{{ swipeNum }}</span>
      </span>
    </div>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      @change="changeSwipe"
    >
      <van-swipe-item v-for="(item, index) in images" :key="index"
        ><img :src="item" height="150" width="100%"
      /></van-swipe-item>
    </van-swipe>
    <van-grid :border="true" :column-num="2" :gutter="10">
      <van-grid-item v-for="item in goods" :key="item.aid" @click="open(item.aid)">
        <!--  -->
        <van-image :src="item.apic1" />
        {{ item.aname }}
        ￥{{ item.price }}
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      userName: "登录",
      indexPage: 1,
      swipeNum: 10,
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
        "https://img01.yzcdn.cn/vant/apple-3.jpg",
      ],
      goods: [
        {
          apic1: "https://img01.yzcdn.cn/vant/apple-1.jpg",
          aname: "huanshan1",
          aid: 1,
        },
        {
          apic1: "https://img01.yzcdn.cn/vant/apple-2.jpg",
          aname: "huanshan2",
          aid: 2,
        },
        {
          apic1: "https://img01.yzcdn.cn/vant/apple-3.jpg",
          aname: "huanshan3",
          aid: 3,
        },
      ],
    };
  },
  created: function () {
    this.$axios
      .get("areas")
      .then((res) => {
        if (res.data.statusCode == 200) {
          this.goods = res.data.info;
          for (var i in this.goods) {
            this.images[i] = this.goods[i].apic1;
          }
          //console.log(this.images);
        }
      })
      .catch((console) => {});
  },

  methods: {
    onClickRight: function () {
      this.$router.push({ path: "/user/auth" });
    },
    changeSwipe(index) {
      this.indexPage = index;
    },
    open(key) {
      //console.log(key);
      this.$router.push({ path: "/user/goods", query:{'goodsId':key}});
    },
  },
};
</script>

<style>
.my-swipe .van-swipe-item {
  color: #fff;
  text-align: center;
  background-color: #fbfcfd;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.recommend {
  font-weight: 700;
}
.tips {
  font-size: 12px;
  margin-left: 6px;
  color: #8f8f8f;
}
.swipe-num {
  float: right;
}
.indexPage {
  font-weight: 700;
}
.pageNum {
  font-size: 12px;
  color: #8f8f8f;
}
</style>
